<template>
    <div class="container">
        <van-nav-bar title="异常工单" left-arrow  @click-left="onClickLeft"/>
        <div class="tipTwo" v-if="AbnormalList.length == 0">暂无数据</div>
        <div class="content" @scroll="goScroll" v-else>
            <template
                v-for="item in AbnormalList"
                :key="item.id"
            >
                <div class="item">
                    <div class="title">{{ item.address }}</div>
                    <div class="text">
                        <p>工单号</p>
                        <p>{{ item.gdId }}</p>
                    </div>
                    <div class="text">
                        <p>设备编号</p>
                        <p>{{ item.code }}</p>
                    </div>
                    <div class="text">
                        <p>上报时间</p>
                        <p>{{ item.reportTime }}</p>
                    </div>
                    <button @click="goHandle(item)">去处理</button>
                </div>
            </template>
            <div class="tip" v-if="!tipFlag">数据加载完成</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { 
    getAbnormalList,
} from '@/api/AbnormalReport';
const router = useRouter()
const onClickLeft = () => { //点击返回
    router.push({ path:'/HomePage' })
}

let AbnormalList = ref([])
let pageIndex = ref(1)
let pageSize = ref(3)
let tipFlag = ref(true)//数据加载完成的提示
let totalSize = ref(0)
const getAbnormalListFun = async () => {
    let getAbnormalListData = {
        pageIndex:pageIndex.value,
        pageSize:pageSize.value
    }
    try{
        const res = await getAbnormalList(getAbnormalListData)
        if(res.data.code == 200){
            AbnormalList.value = AbnormalList.value.concat(res.data.dataset.dataset.List)
            totalSize.value = res.data.dataset.dataset.totalSize
        }
        pageIndex.value++
        if(pageIndex.value > Math.ceil(totalSize.value / pageSize.value)){
            tipFlag.value = false
        }
    }catch(error){}

}
 
const goScroll = e => { //发生滚动时
    const {scrollTop,clientHeight,scrollHeight}= e.target;
    if(scrollTop+clientHeight >= scrollHeight){
        if(tipFlag.value){
            getAbnormalListFun()
        }
    }
}

const goHandle = item => { //点击去上报
    const {id} = item
    router.push({
        path:'/AbnormalListHandle',
        query:{
            id:id
        }
    })
}

onMounted(() => {
    getAbnormalListFun()
})
</script>

<style lang="less" scoped>
.container{
    background-color: #F9F9F9;
    :deep(.van-nav-bar .van-icon){
        color:#000
    }
    .content{
        width:100vw;
        display: flex;
        flex-direction: column;
        font-size: 4em;
        gap:1em;
        overflow: auto;
        height:93vh;
        .item{
            background: #fff;
            box-sizing: border-box;
            padding:1em 0.8em;
            .title{
                font-size: 1.1em;
                font-weight: bold;
                box-sizing: border-box;
                padding-bottom: 1em;
                border-bottom: 1px dashed #ccc;
            }
            .text{
                box-sizing: border-box;
                padding-top: 1em;
                display: flex;
                justify-content: space-between;
            }
            button{
                display: block;
                width:10em;
                height:2.5em;
                background: #005DFF;
                color:#fff;
                border-radius: 2em;
                margin:0 auto;
                border: none;
                font-weight: bold;
                margin-top:3em;
            }
        }
        .tip{
            text-align: center;
            margin-top:1em;
        }
    }
    .tipTwo{
        text-align: center;
        font-size: 4em;
        margin-top:2em;
        height:100vh;
    }
}
</style>